<template>
  <div class="box">
    <div class="left">
      <div class="left_title">客户列表</div>
      <div>
        <el-input placeholder="请输入客户名称" suffix-icon="el-icon-search" v-model="searchInput" @change="searchs()">
        </el-input>
      </div>
      <div class="searchList">
        <div v-for="v in searchList" :key="v.customerID" class="searchListItem" @click="setInfo(v)">
          {{ v.customerNM }}
        </div>
      </div>
    </div>
    <div class="right">
      <!-- 客户信息 -->
      <div class="card">
        <div class="title">客户信息</div>
        <div class="info">
          <div class="infoItem">
            <div>
              <span class="infoItemLabel">客户名称：</span><span>{{ infos.customerNM }}</span>
            </div>
            <div>
              <span class="infoItemLabel">客户编号：</span><span>{{ infos.customerID }}</span>
            </div>
            <div>
              <span class="infoItemLabel">公司地址：</span><span>{{ infos.comAddress }}</span>
            </div>
          </div>
          <div class="infoItems">
            <!-- <div>
              <span class="infoItemLabel">信用评级：</span
              ><span>{{ infos.custRating }}</span>
            </div> -->
            <div>
              <span class="infoItemLabel">累计销售规模：</span><span>{{ infos.cumlativeAmount | filterNum }}</span>
            </div>
            <div>
              <span class="infoItemLabel">累计销售只数：</span><span>{{ infos.cumlativeSize }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 风险偏好分布 -->
      <div class="echarts">
        <div>
          <div class="div_title">风险偏好分布</div>
          <div class="distribution">
            <div id="allcharts" class="allcharts" style="height: 100%; width: 20%"></div>
            <div id="brokenLine" class="detailcharts" style="height: 100%; width: 80%"></div>
          </div>
        </div>
        <div class="detail_box">
          <div class="div_title">风险偏好明细</div>
          <div class="search_arae">
            <div>
              <el-input placeholder="请输入债券名称" suffix-icon="el-icon-search" v-model="bondName" @change="bondNameChange">
              </el-input>
            </div>
            <div>
              <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="2020-11-01"
                end-placeholder="2050-11-01" @change="change" value-format="yyyy/MM/dd">
              </el-date-picker>
            </div>
            <div>
              <el-select clearable v-model="evaluationMethod" placeholder="请选择偏好评估法" @change="bondNameChange">
                <el-option v-for="item in labelMethods" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="detail_table">
            <el-table :data="tableData" style="width: 99%" height="200px">
              <el-table-column prop="assessTime" label="时间" fixed width="100px"></el-table-column>
              <el-table-column prop="bondFName" label="债券名称">
              </el-table-column>
              <el-table-column prop="couponRate" label="息票率" width="100px">
              </el-table-column>
              <el-table-column prop="asseseOpenTime,asseseCloseTime" label="对照时间段">
                <template slot-scope="scope">
                  {{ scope.row.asseseOpenTime }} ~
                  {{ scope.row.asseseCloseTime }}
                </template>
              </el-table-column>
              <el-table-column prop="riskAttitudeNm" label="风险偏好值" width="100px" :formatter="fxphzFn">
              </el-table-column>
              <el-table-column prop="assessMethod" label="偏好评估法" width="100px">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="movements">
          <div class="div_title">风险偏好走势</div>
          <div id="charts" class="charts" style="height: 100%"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {
  getDetailTableData,
  getTrendLIstData,
  queryLabelMethod,
  getTotalRiskPreference,
} from "@/api/eigen/customerRiskAssessment.js";
import { riskData } from "@/utils/risk.js";
import { getCustomerInfo } from "@/api/eigen/objectQuery.js";
import { riskDistribution } from "@/api/homePage/index.js";
export default {
  data () {
    return {
      tableData: [],
      searchInput: "",
      date: [],
      infos: {},
      bondName: "",
      evaluationMethod: "",
      beginDate: "",
      endDate: "",
      searchList: [],
      labelMethods: [],
      chartOption: "",
      allOption: {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        title: {
          text: "近期整体风险偏好值",
          x: "center",
          y: "bottom",
          textStyle: {
            color: "#959fc5",
            fontSize: 14,
          },
        },
        series: [
          {
            name: "",
            type: "gauge",
            radius: 67,
            detail: {
              formatter: "{value}",
            },
            axisLine: {
              lineStyle: {
                width: 10, // 这个是修改宽度的属性
              },
            },
            data: [
              {
                value: 50,
                name: "SCORE",
              },
            ],
          },
        ],
      },
      riskRes: [],
    };
  },
  filters: {
    filterNum (value) {
      const str = value ? value.toString() : '';
      if (str) {
        const reg =
          str.indexOf('.') > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
        const returnData = str.replace(reg, ',');
        return returnData;
      } else {
        return ''
      }
    }
  },
  async created () {
    this.getData();
    this.getInfo();

    console.log(this.riskRes, "this.riskRes");
  },
  mounted () {
    this.$nextTick(() => {
      this.getTotalRiskPreference();
    });
    this.$nextTick(() => {
      riskDistribution().then((res) => {
        this.riskRes = res.data;
        this.brokenLineInit();
      });

      this.getLabelMethod();
    });
  },
  methods: {
    fxphzFn (row) {
      return Number(Number(row.riskAttitudeNm) * 100).toFixed(2)
    },
    tabFn (i) {
      this.tabIndex = i;
    },
    async brokenLineInit () {
      let chartDom = document.getElementById("brokenLine");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: [
          {
            data: ["折线图", "柱形图"],
            textStyle: {
              color: "#fff",
            },
          },
        ],
        grid: {
          left: "3%",
          right: "8%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.riskRes.riskInterval,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                type: "solid",
              },
            },
            name: "风险值",
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                type: "solid",
              },
            },
          },
        ],
        series: [
          {
            name: "折线图",
            type: "line",
            stack: "Total",
            emphasis: {
              focus: "series",
            },
            data: this.riskRes.riskValue,
            itemStyle: {
              color: "#0486E6",
            },
          },
          {
            name: "柱形图",
            type: "bar",
            stack: "Total",
            emphasis: {
              focus: "series",
            },
            data: this.riskRes.riskValue,
            itemStyle: {
              color: "#AAB3C1",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    getTotalRiskPreference () {
      let chartDom = document.getElementById("allcharts");
      let myChart = echarts.init(chartDom);
      getTotalRiskPreference({
        type: "01",
      }).then((res) => {
        console.log(this.allOption, "this.allOption");
        this.allOption.series[0].data[0].value = res.data;
        myChart.setOption(this.allOption);
      });
    },
    getData () {
      let params = {
        bondName: this.bondName,
        beginDate: this.beginDate,
        endDate: this.endDate,
        evaluationMethod: this.evaluationMethod,
        customerId: this.infos.customerID,
        page: 1,
        pn: 100,
      };
      if (this.infos.customerID) {
        getDetailTableData({ ...params }).then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.result;
          }
        });
      }
      getTrendLIstData().then((res) => {
        if (res.code === 200) {
          const { data } = res;

          let dataX = Object.values(data).map((item) => {
            return item.map((v) => {
              return v.timePeriod;
            });
          });
          dataX = (dataX + "").split(",");
          this.chartOption = {
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: dataX,
            },
            grid: {
              left: "3%",
              right: "5%",
              bottom: "3%",
              containLabel: true,
            },
            textStyle: {
              color: "#959fc5",
            },
            yAxis: {
              type: "value",
            },
            series: [],
          };
          Object.values(data).forEach((item) => {
            this.chartOption.series.push({
              type: "line",
              stack: "Total",
              areaStyle: {},
              data: item[0].weightedValue,
            });
          });
          console.info(this.chartOption.series);
          let chartDom = document.getElementById("charts");
          let myChart = echarts.init(chartDom);
          myChart.setOption(this.chartOption);
        }
      });
    },
    change () {
      if (!this.date) {
        let params = {
          bondName: this.bondName,
          beginDate: "",
          endDate: "",
          evaluationMethod: this.evaluationMethod,
          customerId: this.infos.customerID,
          page: 1,
          pn: 100,
        };
        if (this.infos.customerID) {
          getDetailTableData({ ...params }).then((res) => {
            if (res.code === 200) {
              this.tableData = res.data.result;
            }
          });
        }
      }
      this.beginDate = this.date[0];
      this.endDate = this.date[1];
      let params = {
        bondName: this.bondName,
        beginDate: this.beginDate,
        endDate: this.endDate,
        evaluationMethod: this.evaluationMethod,
        customerId: this.infos.customerID,
        page: "1",
        pn: "10",
      };
      if (this.infos.customerID) {
        getDetailTableData({ ...params }).then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.result;
          }
        });
      }
    },
    getLabelMethod () {
      let _this = this;
      queryLabelMethod({}).then((res) => {
        _this.labelMethods = res.data;
      });
    },
    bondNameChange () {
      let params = {
        bondName: this.bondName,
        beginDate: this.beginDate,
        endDate: this.endDate,
        evaluationMethod: this.evaluationMethod,
        customerId: this.infos.customerID,
        page: 1,
        pn: 100,
      };
      if (this.infos.customerID) {
        getDetailTableData({ ...params }).then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.result;
          }
        });
      }
    },
    getInfo () {
      getCustomerInfo().then((res) => {
        if (res.code === 200) {
          this.searchList = res.data.result;
        }
      });
    },
    setInfo (v) {
      this.infos = v;
      this.getData();
    },
    searchs () {
      getCustomerInfo({ customerNM: this.searchInput }).then((res) => {
        if (res.code === 200) {
          this.searchList = res.data.result;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;

  .riskAppetiteTable {
    padding-top: 10px;
    padding-right: 10px;

    .el-input__inner {
      background-color: #363657 !important;
      color: #fff;
      border: 1px solid rgba(126, 163, 255, 0.3);
    }
  }

  // .riskAppetiteSelect ::v-deep .el-range-editor.is-active{
  //   border-color: rgba(126, 163, 255, 0.3) !important;
  // }
  .riskAppetiteTable ::v-deep .el-range-input {
    background-color: #363657 !important;
    color: #fff;
  }

  .riskAppetiteSelect {
    margin: 0 5px;
  }

  .riskAppetiteSelect ::v-deep .el-input__inner {
    height: 31px !important;
    line-height: 31px !important;
  }

  .el-select-dropdown {
    padding: 10px 0px !important;
  }

  .left {
    width: 330px;
    background-color: #262d47;
    // height: 80%;
    padding: 10px 10px;

    .left_title {
      font-size: 16px;
      margin-bottom: 10px;
      color: #959fc5;
    }
  }

  .right {
    margin-left: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .echarts {
    flex: 1;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    color: #959fc5;

    >div {
      height: 300px;
      margin-bottom: 10px;
      background-color: #262d47;
      padding: 5px;
      position: relative;
      color: #959fc5;

      .div_title {
        position: absolute;
        left: 5px;
        top: 5px;
      }
    }

    >div:nth-child(3) {
      margin: 0;
    }

    .movements {
      canvas {
        height: 100%;
      }
    }

    .charts {
      width: 100%;
      height: 200px;
    }

    .distribution {
      width: 100%;
      height: 100%;
      display: flex;
    }
  }

  .searchList {
    padding-top: 10px;
    max-height: 900px;
    height: 100%;
    overflow-y: scroll;

    .searchListItem {
      padding-left: 10px;
      padding-right: 10px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #363657;
      color: #959fc5;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .searchListItem:hover {
      background-color: #1c2238 !important;
      color: #fff;
      cursor: pointer;
    }
  }

  .card {
    padding: 10px 10px;
    background-color: #262d47;
    color: #959fc5;

    .title {
      font-size: 16px;
    }

    .content {
      margin-top: 10px;
      display: flex;
    }

    .info {
      display: flex;
      padding: 10px 10px;

      .infoItem {
        flex: 1;

        div:not(:last-child) {
          margin-bottom: 10px;
        }
      }

      .infoItems {
        width: 40%;

        div:not(:last-child) {
          margin-bottom: 10px;
        }
      }
    }
  }

  .search_arae {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;

    div {
      width: 220px;
      margin-right: 10px;

      &::v-deep .el-input__inner {
        height: 40px;
      }
    }
  }

  .detail_table {
    flex: 1;
    padding-left: 10px;
    overflow: hidden;
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .el-date-editor ::v-deep .el-range-input {
    background: none;
  }

  .el-range-editor.el-input__inner {
    background-color: #363657 !important;
    color: #fff;
    border: 1px solid rgba(126, 163, 255, 0.3);
    display: flex;
    align-items: center;
  }
}
</style>
